<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
  import { message } from "@/utils/message";
  import dayjs from "dayjs";

	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });

  onMounted(()=> {
    if(newFormInline.value.title ==='创建供应商'){
      newFormInline.value.supplierCode = 'C' + dayjs().format('YYYYMMDDHHmmss')
    }
  })

</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="newFormInline.supplierName" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="供应商编码" prop="supplierCode">
          <el-input v-model="newFormInline.supplierCode" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="联系人姓名">
          <el-input v-model="newFormInline.contactName" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="联系电话">
          <el-input v-model="newFormInline.contactPhone" clearable placeholder="请输入" type="number" class="no_number"
          oninput="if(value.length>11)value=value.slice(0,11)"/>
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="联系邮箱">
          <el-input v-model="newFormInline.contactEmail" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="状态" prop="status">
          <el-radio-group v-model="newFormInline.status">
            <el-radio :label="1">启动</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
      	</el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
      	<el-form-item label="地址">
          <el-input v-model="newFormInline.address" type="textarea" :rows="3" clearable placeholder="请输入" />
      	</el-form-item>
      </re-col>
    </el-row>
	</el-form>
</template>
<style scoped>
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 1px 11px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
</style>
